<template>
<div>
  <el-tabs v-model="editableTabsValue" type="border-card" @tab-click="TableClick">
    <el-tab-pane
        v-for="ac in editableTabs"
        :key="ac.id"
        :label="ac.tname"
        :name="ac.id.toString()">
      {{ac.tname}}
    </el-tab-pane>
  </el-tabs>
  <el-image style="width: 80px" src='https://foruda.gitee.com/avatar/1662086029082542502/11508498_qbx666_1662086029.png'></el-image>
  <br>{{username}}欢迎回来
  <el-row>
    <el-col :span="7" v-for="pro in tableData" :key="pro.id" :offset="1">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="pro.img" class="image" @click="detail(pro.id)"/>
        <div style="padding: 14px;">
          <div>商品名称:{{ pro.name }}</div>
          <div>商品分类:{{ pro.tname }}</div>
          <div>商品价格:{{ pro.price }}</div>
          <div>
            <el-button type="primary">立即购买</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "ListView",
  data(){
    return{
      editableTabsValue: '',
      editableTabs: [],
      tableData:[],
      username:'',
    }
  },methods:{
    menuList(){
      this.axios.get("http://localhost:9200/type/list").then(res=>{
        this.editableTabs=res.data;
      })
    },TableClick(){
      console.log(this.editableTabsValue);
      this.List();
    },List(){
      this.axios.get("http://localhost:9200/pro/list",{params:{
          tid:this.editableTabsValue
        }}).then(res=>{
         this.tableData=res.data;
      });
    },detail(val){
      //跳转详情界面
      this.$router.push({path:"/product/"+val});
    }
  },created() {
    let item = JSON.parse(localStorage.getItem("user"));
    this.username=item.name;
    console.log(item);
    this.menuList();
    this.List();
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>